<template>
	<drawer ref="drawer" @cancel="cancel" @close="show = false" :show="show" @confirm="confirm" :cancelEvent="false" :title="'筛选'" cancelText="重置">
		<view class="filter-content">
			<view class="filter-item">
				<view class="filter-item-label label-margin-fix">
					周边范围<text>({{ (sliderValue == 0 || sliderValue == 60) ? '' : sliderValue }}km)</text>
				</view>
				<view class="filter-item-content">
					<sdSlider :min="0" :max="60" :step="1" :value="sliderValue" :marks="[
						{ value: 0, label: '0' },
						{ value: 10, label: '10' },
						{ value: 15, label: '15' },
						{ value: 20, label: '20' },
						{ value: 50, label: '50' },
						{ value: 60, label: '不限' }
					]" @input="change"></sdSlider>
				</view>
			</view>

			<filter-item label="交通工具" :options="vehicleOptions" v-model="selectedVehicle" @change="onVehicleChange" />

			<filter-item label="工作状态" :options="workStatusOptions" v-model="selectedWorkStatus"
				@change="onWorkStatusChange" />

			<filter-item label="出勤状况" :options="attendanceOptions" v-model="selectedAttendance"
				@change="onAttendanceChange" />

			<filter-item label="技能等级" :options="skillOptions" v-model="selectedSkill" @change="onSkillChange" />

		</view>
	</drawer>
</template>
<script>
import drawer from '@/components/filter-drawer/drawer.vue';
import sdSlider from './sd-slider.vue';
import filterItem from '@/components/filter-drawer/filter-item.vue';
import { dictionaryTree } from '@/apis/elevator.js';
export default {
	components: { drawer, sdSlider, filterItem },
	props: {
		title: {
			type: String,
			default: '请选择'
		},

	},
	data() {
		return {
			sliderValue: 40,
			vehicleOptions: [
				{ label: '汽车', value: 'car' },
				{ label: '电动车', value: 'electricVehicle' },
				{ label: '摩托车', value: 'motorcycle' },
				{ label: '公交车', value: 'bus' },
				{ label: '自行车', value: 'bicycle' },
				{ label: '其他', value: 'other' }
			],
			selectedVehicle: [],
			workStatusOptions: [
				{ label: '空闲', value: '空闲' },
				{ label: '保养作业中', value: '保养作业中' },
				{ label: '维修作业中', value: '维修作业中' },
				{ label: '救援作业中', value: '救援作业中' }
			],
			selectedWorkStatus: [],
			attendanceOptions: [
				{ label: '已出勤', value: '今日已出勤' },
				{ label: '未出勤', value: '今日未出勤' }
			],
			selectedAttendance: [],
			skillOptions: [

			],
			selectedSkill: [],
			show:false,
		};
	},
	created() {
		this.getUserTypes();
	},
	methods: {
		getUserTypes() {
			dictionaryTree({
				code: 'user_elevator_skill_type'
			}).then(res => {
				let list = (res.data || []).sort((a, b) => Number(a.dictKey) - Number(b.dictKey));

				// 转换为 filter-item 组件期望的格式
				this.skillOptions = list.map(item => ({
					label: item.dictValue,
					value: item.dictKey
				}));
			});
		},
		change(res) {
			console.log(res);
			this.sliderValue = res;
		},

		open(filterData) {
			// 回显筛选项
			if (filterData) {
				if (typeof filterData.sliderValue !== 'undefined') this.sliderValue = filterData.sliderValue;
				if (Array.isArray(filterData.vehicle)) this.selectedVehicle = [...filterData.vehicle];
				if (Array.isArray(filterData.workStatus)) this.selectedWorkStatus = [...filterData.workStatus];
				if (Array.isArray(filterData.attendance)) this.selectedAttendance = [...filterData.attendance];
				if (Array.isArray(filterData.skill)) this.selectedSkill = [...filterData.skill];
			}
			this.show = true;
		},

		confirm() {
			// 收集所有筛选项的值
			const filterData = {
				sliderValue: this.sliderValue,
				vehicle: this.selectedVehicle,
				workStatus: this.selectedWorkStatus,
				attendance: this.selectedAttendance,
				skill: this.selectedSkill
			};
			this.$emit('confirm', filterData);
			this.show = false;
		},

		cancel() {
			// 重置所有筛选项为"全部"状态
			this.sliderValue = 40;
			this.selectedVehicle = [];
			this.selectedWorkStatus = [];
			this.selectedAttendance = [];
			this.selectedSkill = [];
		},

		// 交通工具变化处理
		onVehicleChange(value) {
			this.selectedVehicle = value;
		},

		// 工作状态变化处理
		onWorkStatusChange(value) {
			this.selectedWorkStatus = value;
		},

		// 出勤状况变化处理
		onAttendanceChange(value) {
			this.selectedAttendance = value;
		},

		// 技能等级变化处理
		onSkillChange(value) {
			this.selectedSkill = value;
		},

		// 以下方法保留以兼容现有逻辑，但实际不再使用
		selectWorkStatusAll() {
			this.selectedWorkStatus = [];
		},
		selectWorkStatusItem(value) {
			const idx = this.selectedWorkStatus.indexOf(value);
			if (idx > -1) {
				this.selectedWorkStatus.splice(idx, 1);
			} else {
				this.selectedWorkStatus.push(value);
			}
			// 只要有选中非全部，全部就不高亮
		},
		selectVehicleAll() {
			this.selectedVehicle = [];
		},
		selectVehicleItem(value) {
			const idx = this.selectedVehicle.indexOf(value);
			if (idx > -1) {
				this.selectedVehicle.splice(idx, 1);
			} else {
				this.selectedVehicle.push(value);
			}
		},
		selectAttendanceAll() {
			this.selectedAttendance = [];
		},
		selectAttendanceItem(value) {
			const idx = this.selectedAttendance.indexOf(value);
			if (idx > -1) {
				this.selectedAttendance.splice(idx, 1);
			} else {
				this.selectedAttendance.push(value);
			}
		},
		selectSkill(value) {
			// 废弃
		},
		selectSkillAll() {
			this.selectedSkill = [];
		},
		selectSkillItem(value) {
			const idx = this.selectedSkill.indexOf(value);
			if (idx > -1) {
				this.selectedSkill.splice(idx, 1);
			} else {
				this.selectedSkill.push(value);
			}
		},
	}
};
</script>
<style lang="scss" scoped>
.filter-content {
	padding: 0 30rpx;
}

// 周边范围的样式
.filter-item {
	color: #333;
	padding: 15rpx 0;

	&-label {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 16rpx;

		text {
			color: #999;
			font-weight: normal;
		}
	}
}

.label-margin-fix {
	margin-bottom: 2rpx !important;
	padding-top: 16rpx;
}
</style>